<template>
  <div class="configuration-container">
    <type-string
      v-if="type === Type.text"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-switch
      v-if="type === Type.switch"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-radio
      v-if="type === Type.radio"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-select
      v-if="type === Type.select"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-multi-select
      v-if="type === Type.multiSelect"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-stepper
      v-if="type === Type.stepper"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <type-array
      v-if="type === Type.array"
      :name="name"
      :value="value"
      @change="(e, v) => $emit('change', e, v)"
    />
    <!-- <template v-if="simple">
      <div
        class="options-item"
        v-for="(item, index) in inputs"
        :key="index"
      >
        <type-string
          :name="subItem"
          :value="item"
        />
        <div class="operate-container">
          <i
            class="el-icon-circle-close"
            style="cursor: pointer"
            @click="onDeleteBtnClick(index)"
          ></i>
        </div>
      </div>
    </template>
    <template v-else>
      <div v-for="(subItem, subIndex) in Object.keys(types)" :key="subIndex">
        <div  v-if="types[subItem] === 'input'">
        {{subItem}}
        <type-string
          :name="subItem"
          :value="item"
        />
        </div>
        
      <el-switch
        v-if="types[subItem] === 'switch'"
      ></el-switch>
      </div>
    </template>

    <el-button
      size="small"
      type="primary"
      class="add-btn"
      @click="onAddBtnClick"
    >+</el-button> -->
  </div>
</template>
<script>
import { Type } from './options.constants'
import TypeString from './type-string.vue'
import TypeSwitch from './type-switch.vue'
import TypeRadio from './type-radio.vue'
import TypeSelect from './type-select.vue'
import TypeMultiSelect from './type-multi-select.vue'
import TypeStepper from './type-stepper.vue'
import TypeArray from './type-array.vue'

export default {
  data() {
    return {
      Type,
    }
  },
  props: ['type', 'name', 'value'],
  components: {
    'type-string': TypeString,
    'type-switch': TypeSwitch,
    'type-radio': TypeRadio,
    'type-select': TypeSelect,
    'type-multi-select': TypeMultiSelect,
    'type-stepper': TypeStepper,
    'type-array': TypeArray,
  },
  methods: {
    onSimpleUpdate(value, index) {
      const newValue = [...this.inputs.slice(0, -1), value]
      console.log('dxz onSimpleUpdate', newValue)
      this.$emit("change", newValue);
    },
    // onNameUpdate(value, index) {
    //   const newOptions = this.value.map((item, idx) => {
    //     return index === idx ? { ...item, name: value } : item;
    //   });
    //   this.$emit("change", newOptions);
    // },
    // onShowTextUpdate(value, index) {
    //   const newOptions = this.value.map((item, idx) => {
    //     return index === idx ? { ...item, showText: value } : item;
    //   });
    //   this.$emit("change", newOptions);
    // },
    onDeleteBtnClick(index) {
      const newOptions = this.inputs.filter((item, idx) => {
        return index !== idx;
      });
      this.$emit("change", newOptions);
    },
    onAddBtnClick() {
      const newOptions = this.simple
      ? [
        ...this.inputs,
        ''
      ]
      : [
        ...this.inputs,
        {
          name: "No." + this.inputs.length,
          showText: "No." + this.inputs.length,
        },
      ];
      this.$emit("change", newOptions);
    },
  },
};
</script>
<style scoped>
.configuration-container {
  margin-top: 20px;
}
.options-title {
  text-align: left;
  flex: 1;
  margin-left: 10px;
  min-width: 100px;
}
.options-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 15px;
}
.input {
  border-radius: 15px;
  box-shadow: 0px 0px 10px 0px #ccc;
  width: 100px;
  padding: 4px 10px 4px 15px;
  box-sizing: border-box;
  margin-right: 10px;
  border: none;
  flex: 1;
}
.operate-container {
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.close-btn {
  cursor: pointer;
  border: 1px solid #aaa;
  color: #aaa;
  padding: 0;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-btn {
  cursor: pointer;
  width: 100%;
}
</style>